import React from 'react';
import { Button, Divider } from 'antd';
import { ArrowLeftOutlined } from '@ant-design/icons';
import './index.scss';

const PageHeader = ({
  title,
  subTitle,
  onBack,
  extra,
  children,
  style,
  className,
  breadcrumb,
  ghost = false,
  ...props
}) => {
  return (
    <div 
      className={`custom-page-header ${ghost ? 'ghost' : ''} ${className || ''}`}
      style={style}
      {...props}
    >
      {/* 头部区域 */}
      <div className="page-header-heading">
        <div className="page-header-left">
          {/* 返回按钮 */}
          {onBack && (
            <Button
              type="text"
              icon={<ArrowLeftOutlined />}
              onClick={onBack}
              className="back-button"
            />
          )}
          
          {/* 标题区域 */}
          <div className="page-header-title-wrapper">
            {title && <div className="page-header-title">{title}</div>}
            {subTitle && <div className="page-header-subtitle">{subTitle}</div>}
          </div>
        </div>

        {/* 右侧操作区域 */}
        {extra && <div className="page-header-extra">{extra}</div>}
      </div>

      {/* 面包屑导航 */}
      {breadcrumb && (
        <div className="page-header-breadcrumb">
          {breadcrumb.routes?.map((route, index) => (
            <span key={index} className="breadcrumb-item">
              {route.breadcrumbName}
              {index < breadcrumb.routes.length - 1 && (
                <span className="breadcrumb-separator"> / </span>
              )}
            </span>
          ))}
        </div>
      )}

      {/* 内容区域 */}
      {children && (
        <>
          <Divider style={{ margin: '16px 0' }} />
          <div className="page-header-content">{children}</div>
        </>
      )}
    </div>
  );
};

export default PageHeader;